<!-- 编辑权限 -->
<template>
    <div class="page-box h100 display-flex czbj fgdgtte">
        <n-form inline size="normal">
            <n-form-item>
                <n-button type="info" size="medium" class="ml10" @click="saveFun">保存</n-button>
                <n-button type="error" size="medium" class="ml10" @click="Back">返回</n-button>
            </n-form-item>
        </n-form>

        <n-form ref="formRef" label-placement="left" label-width="120px" require-mark-placement="right-hanging"
            size="medium" :style="{
                maxWidth: '1000px',
            }">
            <n-grid :cols="24" :x-gap="20">
                <n-form-item-gi :span="12" label="角色名称" class="mt20">
                    <n-input type="text" placeholder="" size="medium" clearable v-model:value="title"></n-input>
                </n-form-item-gi>
                <n-form-item-gi :span="12" label="主页" class="mt20" v-if="usertype != 1">
                    <n-select :options="jhnse" v-model:value="index" filterable />
                </n-form-item-gi>
                <!-- <n-form-item-gi :span="24" label="角色菜单">
           
              </n-form-item-gi> -->
            </n-grid>
        </n-form>
        <div style="width: 1000px;">
            <n-tabs type="line" size="medium">
                <n-tab-pane name="1" tab="角色菜单">
                    <n-checkbox-group v-model:value="cities">
                        <n-data-table max-height="700" :columns="columns" :data="datalist" :row-key="rowKey"
                            :default-expanded-row-keys="expandedKey" class="mt10" />
                    </n-checkbox-group>
                </n-tab-pane>
                <n-tab-pane name="2" tab="区域权限">
                   正在努力开发中...
                </n-tab-pane>
            </n-tabs>


        </div>

        <n-modal v-model:show="photoShowModal" preset="card" class="Stock-diagnosis">
            <template #header>
                <div>图片库</div>
            </template>
            <div>
                <photoGallery @getImg="getImg"></photoGallery>
            </div>
            <template #action>
                <div class="tr">
                    <n-button @click="photoShowModal = false"> 取消 </n-button>
                    <n-button class="ml10" type="info" @click="setImg"> 确定 </n-button>
                </div>
            </template>
        </n-modal>
    </div>
</template>
<script lang='ts' setup>
import { ref, h, computed } from "vue";
import store from "../../store";
import { NCheckbox } from "naive-ui";
import { dxpost, callBack, qurl, dxget } from "../../util/index";
import photoGallery from "../../components/util/photoGallery";
import rolisty from "../../router/xqts"
const jhnse = ref([])
rolisty.map(a => {
    jhnse.value.push({
        label: a.meta.title,
        value: a.path
    })
})
const photoShowModal = ref(false);
const cities = ref();
const title = ref();
const index = ref();
const logo = ref();
const dapang = ref("1");
const Back = callBack;
const rowKey = (row) => row.id;
const cz = qurl();
const menuID = ref(0); // 是否为编辑状态
const expandedKey = ref([]);
const usertype = localStorage.usertype;
if (store.state.menumgList) {
    store.state.menumgList.map((a) => {
        expandedKey.value.push(a.id);
    });
}
const datalist = computed(() => {
    //  const datsw =  store.state.menumgList.filter(a=> a.usertype==cz.usertype)
    return store.state.menumgList;
});
const columns = [
    {
        title: "模块标题",
        width: "200",
        key: "title",
    },
    {
        title: "功能权限",
        render(row) {
            if (row.parentMenuCode != 0) {
                return [
                    h(NCheckbox, {
                        value: row.PagePermissionIdentification,
                        label: "页面",
                    }),
                    h(NCheckbox, {
                        value: row.DeletePermissionID,
                        label: "删除",
                    }),
                    h(NCheckbox, {
                        value: row.ViewPermissionID,
                        label: "查看",
                    }),
                    h(NCheckbox, {
                        value: row.EditPermissionIdentifier,
                        label: "编辑",
                    }),
                    h(NCheckbox, {
                        value: row.NewPermissionIdentifier,
                        label: "新增",
                    }),
                ];
            } else {
                return [
                    h(NCheckbox, {
                        value: row.PagePermissionIdentification,
                        label: "页面",
                    }),
                ];
            }
        },
    },
];

const saveFun = async () => {
    const cs: any = {};
    cs.thenAdd = "name";
    cs.name = title.value;
    cs.index = index.value;
    cs.logo = 'https://duxinggj-1251133427.cos.ap-guangzhou.myqcloud.com/dxgjAdmin/userImg/未标题-11676647036540.png?imageMogr2/format/webp';
    cs.dapang = 2;
    cs.RoleOfTheMenu = cities.value.join(",");
    if (localStorage.usertype && localStorage.usertype != "null") {
        cs.usertype = localStorage.usertype;
    }

    if (menuID.value) {
        cs.id = menuID.value;
    }
    if (cs.usertype == 1) {
        cs.index = "/tj";
    }
    let { errno }: any = await dxpost(
        "dxgjAdmin/rolemanagement",
        cs,
        menuID.value != 0 ? "PUT" : "POST"
    );
    window.$message.success("操作成功！");
    console.log(errno);
    callBack();
};
const initData = async () => {
    let { data }: any = await dxget("dxgjAdmin/rolemanagement", cz);
    cities.value = data.RoleOfTheMenu.split(",");
    title.value = data.name;
    menuID.value = data.id;
    index.value = data.index;
    logo.value = data.logo;
};
let logoImg = null;
const getImg = (img) => {
    logoImg = img;
};
const setImg = () => {
    logo.value = logoImg;
    photoShowModal.value = false;
};
if (cz.id) {
    initData();
}
</script>
<style scoped>
.fgdgtte {
    overflow: auto;
}

.ddfrww {
    position: relative;
    top: 4px;
}
</style>